<template>
  <a-modal
    v-model:visible="visible"
    :width="384"
    :confirm-loading="confirmLoading"
    :afterClose="remove"
    @ok="handleOk"
  >
    <template #title>
      <!-- <icon-font type="icon-safetycertificate" :size="18"></icon-font> -->
      <span style="marginleft: 4px">{{ fields.id ? '编辑' : '新增' }}指标</span>
    </template>
    <a-form ref="formRef" :model="modelRef" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="指标名称" name="name">
        <a-input v-model:value="modelRef.name" placeholder="请输入指标名称" />
      </a-form-item>
      <a-form-item label="指标类型" name="type">
        <a-select v-model:value="modelRef.type" placeholder="指标类型" style="width: 124px">
          <a-select-option :value="1">学院指标</a-select-option>
          <a-select-option :value="2">教师指标</a-select-option>
          <a-select-option :value="2">学生指标</a-select-option>
        </a-select>
        <div style="float: right">
          <a-input
            v-model:value="modelRef.score"
            style="width: 104px"
            placeholder="指标分数"
          ></a-input>
        </div>
      </a-form-item>
      <a-form-item label="评价标准" name="cparagraph">
        <a-textarea :rows="4" v-model:value="modelRef.cparagraph" placeholder="请输入确认密码" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue'
  import {
    Modal,
    Form,
    InputNumber,
    Input,
    Select,
    TreeSelect,
    Spin,
    Checkbox,
  } from 'ant-design-vue'
  import { constantRouterComponents } from '@/router/modules'
  import { useStore } from '@/store'
  import { setData } from '@/api/common'
  import iconFont from '@/components/iconfont/icon-font'

  const prefix = process.env.BASE_URL

  interface IState {
    visible: boolean
    confirmLoading: boolean
    spinning: boolean
  }

  export default defineComponent({
    name: 'InterviewOperateModal',
    components: {
      [Modal.name]: Modal,
      [Form.name]: Form,
      [Form.Item.name]: Form.Item,
      [InputNumber.name]: InputNumber,
      [Input.name]: Input,
      [Select.name]: Select,
      ASelectOption: Select.Option,
      [Checkbox.name]: Checkbox,
      [Checkbox.Group.name]: Checkbox.Group,
      [TreeSelect.name]: TreeSelect,
      [Spin.name]: Spin,
      iconFont,
    },
    props: {
      remove: {
        // 移除模态框
        type: Function,
      },
      fields: {
        type: Object,
        default: () => ({}),
      },
      callback: {
        type: Function,
      },
    },
    setup(props) {
      const formRef = ref<any>(null)
      const store = useStore()

      const state: IState = reactive({
        visible: true,
        confirmLoading: false,
        spinning: false,
      })
      const modelRef = reactive({
        type: null,
        name: null,
        cparagraph: null,
        score: null,
      }) as any

      const rules = {}

      // 如果有id,则为编辑操作
      if (props.fields.id) {
        Object.keys(modelRef).forEach((key) => (modelRef[key] = props.fields[key]))
      }

      const handleOk = async (e) => {
        e.preventDefault()
        state.confirmLoading = true
        try {
          await formRef.value.validate()
          const id = props.fields.id
          const params = { ...modelRef }
          await setData(params).finally(() => (state.confirmLoading = false))
          state.visible = false
          props?.callback?.()
        } catch (error) {
          console.log('error', error)
          state.confirmLoading = false
        }
      }

      onMounted(() => {})

      return {
        ...toRefs(state),
        formRef,
        rules,
        prefix,
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
        modelRef,
        constantRouterComponents,
        handleOk,
      }
    },
  })
</script>

<style scoped></style>
